<template>
  <div id="app">
    <h3 class="register_title">用户注册</h3>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="uName">
        <el-input v-model="ruleForm.uName"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="uPhone">
        <el-input v-model="ruleForm.uPhone"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="uSex">
        <el-select v-model="ruleForm.uSex" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="密码" prop="uPassword">
        <el-input type="password" v-model="ruleForm.uPassword" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPassWord">
        <el-input type="password" v-model="ruleForm.checkPassWord" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="uEmail">
        <el-input v-model="ruleForm.uEmail"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即注册</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button type="primary" plain @click="toUserLogin">已有账户，点我登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {register} from '@/api/user'

  export default {
    name: 'UserRegister',
    data() {
      //检查密码
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.uPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          uName: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          uName: [
            {required: true, message: '请输入姓名', trigger: 'change'},
            {min: 3, max: 10, message: '长度在3-10个字符', trigger: 'blur'}
          ],
          uPhone: [
            {required: true, message: '请输入手机号', trigger: 'change'},
            {min: 11, max: 11, message: '长度必须为11位', trigger: 'blur'}
          ],
          uPassword: [
            {validator: validatePass, required: true, message: '请输入密码', trigger: 'blur'},
            {min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur'}
          ],
          uEmail: [
            {required: true, message: '请输入邮箱', trigger: 'blur'},
            {min: 8, message: '长度最少 8 个字符', trigger: 'blur'}
          ],
          checkPassWord: [
            {validator: validatePass2, required: true, trigger: 'blur'}
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          //如果前台校验表单无问题，则提交
          if (valid) {
            register({
              uname: this.ruleForm.uName,
              uphone: this.ruleForm.uPhone,
              usex: this.ruleForm.uSex,
              upassword: this.ruleForm.uPassword,
              uemail: this.ruleForm.uEmail
            }).then(result => {
                if (result.data.code === 200) {
                  this.$message.success('注册成功');
                  this.$router.replace({path: '/'})
                } else if (result.data.code === 401) {
                  this.$message.error('注册失败，用户已存在');
                } else {
                  this.$message.error('注册失败,请重新注册');
                }
              })
              .catch(result => {
                this.$message.error('因系统原因注册失败，请重试');
              })

          } else {  //否则弹窗提醒
            this.$message.error('注册失败，请补全信息');
            return false;
          }
        });
      },
      //重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //点我登录方法
      toUserLogin() {
        this.$router.replace({path: '/'})
      }
    }
  }
</script>

<style>

</style>
